<script setup lang="ts"></script>

<template>
    <a-layout class="page">
        <a-layout-content class="page-content">
            <a-scrollbar
                style="height: calc(100vh - var(--top-nav-height) - var(--bottom-bar-height)); overflow-y: auto"
            >
                <slot />
            </a-scrollbar>
        </a-layout-content>
        <a-layout-footer class="page-footer">
            <a-space :size="20">
                <slot name="footer-left" />
            </a-space>
            <a-space :size="20">
                <slot name="footer-right" />
            </a-space>
        </a-layout-footer>
    </a-layout>
</template>

<style scoped lang="less">
.page {
    height: calc(100vh - var(--top-nav-height));

    &-footer {
        height: var(--bottom-bar-height);
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
    }
}
</style>
